<template>
  <div class="product-box">
    <div class="good">
      <header class="good-header">新品上线</header>
      <div class="good-box">
        <div class="good-item" v-for="(item,index) in newGoodses" :key="index" @click="goToDetail(item)">
          <img :src="prefix(item.goodsCoverImg)" alt="">
          <div class="good-desc">
            <div class="title">{{item.goodsName}}</div>
            <p class="price">￥{{item.sellingPrice}}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="good">
      <header class="good-header">热门商品</header>
      <div class="good-box">
        <div class="good-item" v-for="item in hots" :key="item.goodsId" @click="goToDetail(item)">
          <img :src="prefix(item.goodsCoverImg)" alt="">
          <div class="good-desc">
            <div class="title">{{ item.goodsName }}</div>
            <div class="price">¥ {{ item.sellingPrice }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="good">
      <header class="good-header">最新推荐</header>
      <div class="good-box">
        <div class="good-item" v-for="item in recommends" :key="item.goodsId" @click="goToDetail(item)">
          <img :src="prefix(item.goodsCoverImg)" alt="">
          <div class="good-desc">
            <div class="title">{{ item.goodsName }}</div>
            <div class="price">¥ {{ item.sellingPrice }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import {getHomeProduct} from 'network/home-product'
export default {
  data() {
    return{
      hots:[],
      newGoodses: [],
      recommends: [],
    }
  },
  async mounted() {
    const {data} = await getHomeProduct()
    console.log(data);
    this.hots = data.hotGoodses
    this.newGoodses = data.newGoodses
    this.recommends = data.recommendGoodses
  },
  methods: {
    goToDetail(item) {
      this.$router.push({ path: `product/${item.goodsId}` })
    }
  },
}
</script>

<style lang="less" scoped>
  .good {
    .good-header {
      height: 50px;
      line-height: 50px;
      text-align: center;
      color: var(--color-high-text);
      font-size: 16px;
      font-weight: 500;
    }
    .good-box {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      .good-item {
        box-sizing: border-box;
        width: 50%;
        border-bottom: 1PX solid #e9e9e9;
        padding: 10px 10px;
        img {
          display: block;
          width: 120px;
          margin: 0 auto;
        }
        .good-desc {
          text-align: center;
          font-size: 14px;
          padding: 10px 0;
          .title {
            color: #222333;
          }
          .price {
            color: var(--color-high-text);
          }
        }
        &:nth-child(2n + 1) {
          border-right: 1px solid #e9e9e9;
        }
      }
    }
  }
</style>